<template>
  <a-modal :visible="visible" class="chooseSheetModal" :centered="true" :footer="null" :closable="false" :destroyOnClose="true" :maskClosable="false" @cancel="closeModal(false)" width="436px">
    <div class="modalBody">
      <div class="modalHeader">请选择需要上传的sheet页</div>
      <choose-sheet-modal-body @closeModal="closeModal" :sheetList="sheetList"></choose-sheet-modal-body>
    </div>
  </a-modal>
</template>

<script setup>
import ChooseSheetModalBody from './ChooseSheetModalBody.vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  sheetList: {
    type: Array,
    default: []
  }
})

const emit = defineEmits(['update:visible'])
const closeModal = res => {
  if(!res) {
    emit('update:visible', false)
  }
  emit('closeModal', res)
}
</script>

<style lang="less" scoped>
.chooseSheetModal {
  .modalBody {
    .modalHeader {
      position: relative;
      line-height: 52px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
      font-weight: bold;
      padding: 0px 32px;
      border-bottom: #e5e5e5 solid 1px;
    }
  }
}
</style>

<style lang="less">
.chooseSheetModal {
  .ant-modal-content {
    border-radius: 8px;
    .ant-modal-body {
      padding: 0px;
    }
  }
}
</style>
